<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖详情</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>

<div id="app">

    <el-button :disabled="disabled" @click="choujiang">开始抽奖</el-button>
    <br>
    {{errorMsg}}

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="奖品名称">
        </el-table-column>
        <el-table-column
                prop="stock"
                label="库存">
        </el-table-column>
    </el-table>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],//存储商品信息
            hid:"",//从当前页面问号后面获取
            disabled:true,//抽奖按钮是否禁用
            user:{},
            errorMsg:"",//抽奖的提示信息
            q:{},//存储当前抽奖权限id
        },
        watch:{
        },
        methods:{
            choujiang(){
                //核心逻辑就是随机从tableData中取出一条数据
                let index = Math.floor(Math.random()*(this.tableData.length+1));

                let gid = "";
                let state = "未中奖";
                if(index==this.tableData.length){
                    this.$message.error("很遗憾，你没有中奖")
                }else{
                    this.$message.success("恭喜你，抽到了:"+this.tableData[index].name)
                    gid = this.tableData[index].id;
                    state = "中奖";
                }
                //存入抽奖信息
                /**
                 * 给后台传的参数：
                 * uid、hid、gid、state、qid
                 */

                let obj = {
                    uid:this.user.id,
                    hid:this.hid,
                    gid:gid,
                    state:state,
                    qid:this.q.id
                }

                axios.post("/choujiangResult/submitRecord",obj).then(res=>{
                    this.$message.success("您的奖品已经在路上了，请关注快递信息")
                    location.reload()//重新加载当前页面
                })



            },
            initData(){
                axios.post("/goods/findGoodsByHid?hid="+this.hid).then(res=>{
                    this.tableData = res.data;
                })

            },
            checkUser(){

                //返回权限信息
                axios.post(`/user/checkUser?uid=${this.user.id}&hid=${this.hid}`).then(res=>{
                    let q = res.data;
                    if(!q){
                        this.errorMsg = "你没有抽奖资格";
                    }else if(q.state=="已使用"){
                        this.errorMsg = "你今天的抽奖资格已经用完";
                    }else{
                        this.errorMsg = "";
                        this.disabled = false;
                    }
                    this.q = q;

                })

            }

        },
        created(){
            this.user = JSON.parse(localStorage.getItem("user"));
            this.hid = getQueryString("id");
            this.initData()
            this.checkUser();
        }
    })
</script>

</body>
</html>